<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Axis Ticks</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>

<script type="text/javascript">
    var height = 500, 
        width = 500, 
        margin = 25,
        axisWidth = width - 2 * margin;
    
    var svg = d3.select("body").append("svg")
            .attr("class", "axis")
            .attr("width", width)
            .attr("height", height);
    
    var scale = d3.scale.linear().domain([0, 100]).range([0, axisWidth]);
    
    var axis = d3.svg.axis()
            .scale(scale)
            .ticks(5)
            .tickSubdivide(5) // <-A
            .tickPadding(10) // <-B
            .tickFormat(function(v){ // <-C
                return v + "%";
            });
        
    svg.append("g")        
        .attr("transform", function(){
            return "translate(" + margin + "," + margin + ")";
        })
        .call(axis);
</script>

</body>

</html>